<template>
    <div>
        <ul>
            <li v-for="(item,index) in this.list"><input type="checkbox" v-model="item.checked" @change="changeCheck(item.checked,index)">{{item.title}}<span @click="del(index)">×</span></li>
        </ul>
    </div>
</template>

<script>
    export default {
        props:{
            list:Array,
        },
        data() {
            return {
                
            }
        },
        mounted() {
            
        },
        methods: {
            del(index){
                this.$emit('del', index);
            },
            changeCheck(checked,index){
                this.$emit('changeCheck',checked,index)
                console.log(checked);
            }
        },
    }
</script>

<style lang="scss" scoped>
ul{
    list-style: none;
    li{
        width: 360px;
        height: 40px;
        border: 1px solid black;;
        border-radius: 5px;
        margin-top: 10px;
        line-height: 40px;
        span{
            display: inline-block;
            font-size: 20px;
            font-weight: 600;
            float: right;
        }
    }
}
</style>